﻿{extend name="public:base" /}

{block name="css"}
<style>
    #bar {
        width: 100%;
        height: 500px; /* 设置合适的高度 */
    }

    #pie {
        width: 100%;
        height: 500px; /* 设置合适的高度 */
    }

    #line {
        width: 100%;
        height: 500px; /* 设置合适的高度 */
    }
</style>{/block}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-6">
            <div class="ibox-content">
                <div id="bar"></div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="ibox-content">
                <div id="pie"></div>
            </div>
        </div>
    </div>
    <div class="row" style="margin-top: 20px">
        <div class="col-lg-12">
            <div class="ibox-content">
                <div id="line"></div>
            </div>
        </div>
    </div>
</div>{/block}

{block name="js"}
<script src="__STATIC__/echarts/echarts.js"></script><!-- 柱状图 -->
<script>
    // 初始化 ECharts 实例
    var barChart = echarts.init(document.getElementById('bar'));

    var bar_option;

    let dataAxis = {$bar_x};
    let data = {$bar_y};
    bar_option = {
        title: {
            text: '业务员拉新排行',
        },
        xAxis: {
            data: dataAxis,
            axisLabel: {
                inside: true,
                color: '#fff'
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            z: 10
        },
        yAxis: {
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#999'
            }
        },
        dataZoom: [
            {
                type: 'inside'
            }
        ],
        series: [
            {
                type: 'bar',
                showBackground: true,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {offset: 0, color: '#83bff6'},
                        {offset: 0.5, color: '#188df0'},
                        {offset: 1, color: '#188df0'}
                    ])
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {offset: 0, color: '#2378f7'},
                            {offset: 0.7, color: '#2378f7'},
                            {offset: 1, color: '#83bff6'}
                        ])
                    }
                },
                data: data
            }
        ]
    };
    // Enable data zoom when user click bar.
    const zoomSize = 6;
    barChart.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        barChart.dispatchAction({
            type: 'dataZoom',
            startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
            endValue:
              dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        });
    });

    bar_option && barChart.setOption(bar_option);
</script><!-- 饼状图 -->
<script>
    // 初始化 ECharts 实例
    var pieChart = echarts.init(document.getElementById('pie'));

    var pie_data = {$pie_data};
    var pieOption;

    pieOption = {
        title: {
            text: '用户身份占比',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: pie_data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    pieOption && pieChart.setOption(pieOption);
</script>
<script>
    // 初始化 ECharts 实例
    var lineChart = echarts.init(document.getElementById('line'));

    var lineOption;
    var line_x = {$line_x};
    var line_y = {$line_y};

    lineOption = {
        title: {
            text: '注册趋势',
            left: 'center'
        },
        xAxis: {
            type: 'category',
            data: line_x
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: line_y,
                type: 'line'
            }
        ]
    };

    lineOption && lineChart.setOption(lineOption);

</script>

{/block}